<template>
  <div class="css">
    <!-- element下拉框 -->
    <el-collapse @change="handleChange" accordion>
      <!-- Gird布局 -->
      <el-collapse-item name="1" class="gird">
        <template slot="title">
          <h3>Gird布局</h3>
        </template>
        <div class="gird-container">
          <div v-for="(item, index) in 10" :key="index" class="grid-item">
            {{ item }}
          </div>
        </div>
      </el-collapse-item>

      <!-- 歌词选中 -->
      <el-collapse-item name="song" class="song">
        <template slot="title">
          <h3>歌词选中</h3>
        </template>
        <div class="song-container">
          <song ref="songComponent"></song>
        </div>
      </el-collapse-item>

      <!--懒加载  -->
      <el-collapse-item name="2" class="lazy">
        <template slot="title">
          <h3>懒加载</h3>
        </template>
        <div v-for="i in 5" :key="i" class="box">盒子</div>
        <img v-lazy :src="ImageData[0].image" alt="" />
        <!-- <img v-lazy :src="ImageData[0].image" alt="" /> -->
      </el-collapse-item>

      <!-- 旋转木马 -->
      <el-collapse-item title="旋转木马" name="3" class="carousel">
        <template slot="title">
          <h3>旋转木马</h3>
        </template>
        <div class="carousel-container">
          <div class="carousel-track">
            <div
              v-for="item in ImageData"
              :key="item.id"
              class="carousel-slide"
            >
              <img v-lazy :src="item.image" :alt="item.name" />
            </div>
          </div>
        </div>
      </el-collapse-item>

      <!-- 手风琴效果 -->
      <el-collapse-item title="手风琴效果" name="4" class="accordion">
        <template slot="title">
          <h3>手风琴效果</h3>
        </template>
        <div class="accordion-container">
          <div
            v-for="(item, index) in ImageData.slice(0, 5)"
            :key="item.id"
            class="accordion-item"
            :class="{ active: activeAccordionIndex === index }"
            @click="toggleAccordion(index)"
          >
            <img v-lazy :src="item.image" :alt="item.name" />
            <div class="accordion-content">
              <h4>{{ item.name }}</h4>
              <p>图片 {{ index + 1 }}</p>
            </div>
          </div>
        </div>
      </el-collapse-item>

      <!-- Echart图表 -->
      <el-collapse-item title="Echart图表" name="5" class="accordion">
        <template slot="title">
          <h3>Echart图表</h3>
        </template>
        <div ref="echart" style="width: 600px; height: 400px"></div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import Mock from "mockjs"; // 引入mockjs
import * as echarts from "echarts";
//导入组件
import song from "./components/song";

export default {
  name: "css",
  components: {
    song,
  },
  data() {
    return {
      //图片数据
      ImageData: [],
      activeAccordionIndex: 0, // 当前激活的手风琴项
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
    this.getImageData();
  },
  methods: {
    //点击对应下拉框
    handleChange(activeNames) {
      console.log("选中对应的下拉框:", activeNames);
    },
    // 生成图片数据
    getImageData() {
      for (let i = 0; i < 10; i++) {
        const mockData = {
          id: Mock.Random.id(), // 生成随机ID
          name: Mock.Random.cname(), // 生成中文姓名
          image: Mock.Random.image(
            "200x100",
            Mock.Random.color(),
            "#FFF",
            "png",
            `Pic:${i + 1}`
          ), // 生成随机图片
        };
        this.ImageData.push(mockData);
      }
    },
    // 添加手风琴交互方法
    toggleAccordion(index) {
      this.activeAccordionIndex = index;
    },
    // 初始化ECharts图表
    initChart() {
      const myChart = echarts.init(this.$refs.echart, "dark");

      const option = {
        title: {
          // 图表标题
          text: "示例展示图表",
          left: "center",
        },
        tooltip: {
          // 提示框组件
          trigger: "axis",
        },
        legend: {
          // 图例组件
          data: ["销量", "利润"],
          top: "10%",
        },
        // 配置要在X轴显示的项
        xAxis: {
          // 设置x轴类型为类目轴
          // 设置x轴数据
          data: ["1月", "2月", "3月", "4月", "5月", "6月"],
        },
        yAxis: {
          // 配置要在Y轴显示的项
          type: "value",
        },
        series: [
          // 定义一个名为“销量”的折线图系列
          {
            name: "销量",
            type: "line",
            data: [120, 132, 101, 134, 90, 230],
          },
          // 定义一个名为“利润”的柱状图系列
          {
            name: "利润",
            type: "bar",
            data: [220, 182, 191, 234, 290, 330],
          },
        ],
      };

      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
// Gird布局
.gird-container {
  width: 500px;
  height: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 100px);
  grid-template-rows: repeat(auto-fill, 1fr);
  .grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fbfbfb;
    // width: 100px;
    // height: 100px;
    border: 1px solid #848484;
    &:hover {
      background-color: rgb(190, 190, 190);
    }
  }
}
//歌词选中
.song {
  .song-container {
    height: 600px; // 设置容器高度
  }
}
// 懒加载
.lazy {
  .box {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background-color: aquamarine;
  }
}
// 旋转木马
.carousel {
  .carousel-container {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .carousel-track {
    display: flex;
    width: calc(200px * 20); // 10张图片 * 2倍循环
    animation: carousel-scroll 30s linear infinite;
  }

  .carousel-slide {
    min-width: 200px;
    flex-shrink: 0;

    img {
      width: 200px;
      height: 120px;
      object-fit: cover;
      display: block;
    }
  }

  @keyframes carousel-scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%); // 移动一半距离，因为图片重复了
    }
  }
}
// 手风琴效果
.accordion {
  .accordion-container {
    display: flex;
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .accordion-item {
    flex: 1;
    position: relative;
    cursor: pointer;
    transition: flex 0.6s ease;
    overflow: hidden;

    &.active {
      flex: 3;
    }

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: filter 0.3s ease;
    }

    &:not(.active) img {
      filter: brightness(0.7);
    }

    .accordion-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
      color: white;
      padding: 20px;
      transform: translateY(100%);
      transition: transform 0.3s ease;

      h4 {
        margin: 0 0 8px 0;
        font-size: 18px;
      }

      p {
        margin: 0;
        font-size: 14px;
        opacity: 0.9;
      }
    }

    &.active .accordion-content {
      transform: translateY(0);
    }

    &:hover:not(.active) {
      flex: 3;
    }
  }
}
</style>